<template>
	<div>
		<div style="display: flex; justify-content: space-between;">
			<h3>学生管理-{{actmsg[state]}}</h3>
			<h3 style="color: blue;" @click="out()">返回主页</h3>
			<h3 style="color: blue;" @click="go2Add()">添加</h3>
		</div>
		<div style="width: 80% ; border: blue 1px solid">
			学生编号:<input type="text" v-model="stu.uid" readonly>
			<hr>
			学生姓名:<input type="text" v-model="stu.uname">
			<hr>
			学生电话:<input type="text" v-model="stu.phone">
			<hr>
			学生密码:<input type="text" v-model="stu.pwd">
			<hr>

			<div style="width: 100%; height: 8vw;display: flex;justify-content: center;align-items: center;">
				<p><img v-bind:src="pic(stu.pic)" style="width: 8vw; height: 8vw;" v-if="state == 0"></p>
				<p>图片:<input type="file" ref="img" ></p>
			</div>
			<hr>
			学生班级:
				<select v-model="stu.clz.clzno">
					<option v-for="c in clzs" 
						v-bind:value="c.clzno" 
						v-bind:selected="stu.clz.clzno == c.clzno">
						{{c.clzname}}
					</option>
				</select>
			<p style="margin: 0;margin-top: 10px;">
				<button style="width: 100%;height: 120%;" @click="update()" v-show="state==0">修改</button>
				<button style="width: 100%;height: 120%;" @click="add()" v-show="state==1">添加</button>
			</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "AdmstuAdd",
		data() {
			return {
				stu: {clz:{clzno:0}},
				actmsg: ['修改', '添加'],
				clzs:[],
				state: -1
			}
		},
		methods: {
			out(){
				this.$router.push("/adm/stu")
			},
			pic(id){
				console.log("图片id：" + id)
				let pic = `${this.$ip}/api/public/showimg/` + id;
				if(id == undefined || id == ""){
					pic = "myhead";
				}
				return pic;
			},
			go2Add() {
				this.state = 1;
				this.stu = {
					uid: 0,uname:'',phone:'',pwd:'',pic:'',clz:{clzno:0}
				}
			},
			add() {
				//设置FormData格式数据
				var fd = new FormData;
				fd.append("uid", 0);
				fd.append("uname", this.stu.uname);
				fd.append("phone", this.stu.phone);
				fd.append("pwd", this.stu.pwd);
				//获取图片信息
				var file = this.$refs.img.files[0];
				fd.append("mypic", file);
				fd.append("clz.clzno",this.stu.clz.clzno);
				
				var that = this;
				this.$axios.post(
					`${this.$ip}/api/adm/stu/add`, fd,this.$store.state.user.to)
					.then(resp => {
						console.dir(resp.data.data);					
					}
				)
				that.$router.push("/adm/stu")
			}, 
			update() {
				//设置FormData格式数据
				var fd = new FormData;
				fd.append("uid", this.stu.uid);
				fd.append("uname", this.stu.uname);
				fd.append("phone", this.stu.phone);
				fd.append("pwd", this.stu.pwd);
				fd.append("pic", this.stu.pic);
				//获取图片信息
				var file = this.$refs.img.files[0];
				fd.append("mypic", file);
				
				var that = this;
				this.$axios.post(
					`${this.$ip}/api/adm/stu/update`, fd, this.$store.state.user.to)
					.then(resp => {
						console.dir("修改完成....");
						that.$router.push("/adm/stu")	
					}
				)
			}

		},
		mounted() {
			this.$axios.get(`${this.$ip}/api/adm/clz/findAll/`,this.$store.state.user.to)
			.then(resp => {
				console.dir(resp.data.data)
				this.clzs = resp.data.data
			})
			
			let id = this.$route.query.uid;
			console.log(id)
			//id不等于0，则为修改
			if (id != "0"){
				this.$axios.get(`${this.$ip}/api/adm/stu/findById/`+id,this.$store.state.user.to)
				.then(resp => {
					console.dir(resp.data.data)
					this.stu = resp.data.data
					this.state = 0
				})
			}
			//id等于0，则为修改
			if (id == "0") { //
				this.stu = {
					uid: 0,uname:'',phone:'',pwd:'',pic:'',clz:{clzno:0}
				};
				this.state = 1;
			}
			
			
			
		}
	}
</script>

<style>
</style>
